<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <!--        <a-breadcrumb-item href=""> 就业服务 </a-breadcrumb-item>-->
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/education/educationHome')"
        >
          教育培训
        </a-breadcrumb-item>
        <a-breadcrumb-item
          :href="Listurl"
          @click.native="$router.push(Listurl)"
        >
          {{ crumbsText }}
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37">培训详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <div class="toleft">
        <div class="image1">
          <img :src="imageWebUrl + trainData.cover" alt="" />
          <!-- <span v-if="mosgolor == 1" class="stateLabelli">未开始</span>
          <span v-if="mosgolor == 2" class="stateLabelli">已结束</span>
          <span v-if="mosgolor == 3" class="stateLabelli">进行中</span> -->
        </div>
      </div>
      <div class="tpright">
        <p class="titleTxt3" style="margin-top: 24px">
          {{ trainData.trainName }}
        </p>
        <div style="margin-top: 24px">
          <span
            v-for="(item, index) in trainData.labels"
            :key="index"
            class="squareLabel"
            >{{ item }}</span
          >
        </div>

        <span class="timeTxt1" style="margin-top: 34px"
          >培训时间：{{ trainData.startTime }} - {{ trainData.endTime }}</span
        >
        <div class="cOicon-id" style="margin-top: 16px">
          <img
            class="imgagesOne"
            :src="imageWebUrl + trainData.comLogo"
            alt=""
          />
          <p>{{ trainData.comName }}</p>
        </div>
        <!-- 收藏功能 -->
        <div class="cOicon-id">
          <div
            class="collection"
            v-if="!collectFlage"
            @click="collectFlag(trainData.trainNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 收藏
          </div>
          <div
            class="collection"
            v-else
            @click="collectFlag(trainData.trainNo)"
          >
            <a-icon type="star" style="color: #ffbe37" /> 已收藏
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="cnleft">
        <a-tabs default-active-key="1" @change="callback" size="large">
          <a-tab-pane key="1" tab="培训介绍">
            <div class="txtx" v-html="trainData.detail"></div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- <div class="cnright" v-show="trainData.briefDesc">
          <div class="axdiv" v-html="trainData.briefDesc"></div>
      </div> -->
    </div>

    <!-- 请登录弹窗 -->
    <a-modal
      class="bassmodal"
      :visible="modal1Visible"
      :closable="false"
      okText="登录"
      :dialog-style="{ top: '24%' }"
      @ok="() => setModal1Visible(false)"
      @cancel="changeFlag"
    >
      <template #footer>
        <a-button size="large" style="" @click="changeFlag()">取消</a-button>
        <a-button size="large" type="primary" @click="goLogin">去登录</a-button>
      </template>
      <p style="font-size: 18px; color: #000; margin-bottom: 1px">
        抱歉！请您先登录后操作。
      </p>
    </a-modal>

    <!-- 登录框组件 -->
    <Login ref="login" />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
import Login from "@/components/popup/login/index.vue";
export default {
  components: { Login },
  data() {
    return {
      trainId: this.$route.query.id,
      trainType: this.$route.query.type,
      mosgolor: 1,
      top: 40,
      bottom: 10,
      trainData: {},
      modal1Visible: false,
      collectFlage: false,
      onLoading:false,
      Listurl:''
    };
  },
  computed: {
    crumbsText(){
      if(this.trainType == 2){
        this.Listurl = "/education/qYtrainList"
        return '企业培训'
      }else if(this.trainType == 3){
        this.Listurl = "/education/trainingList"
        return '职业培训'
      }
    }
  },
  methods: {
    // 去登陆
    // 登录弹框
    goLogin() {
      this.changeFlag();
      // this.$refs["login"].tabIndex = 0;
      // this.$refs["login"].tabType = 0;
      // this.$refs["login"].visible = true;
      this.$refs['login'].tabIndex = 0;
      this.$refs['login'].tabType = 0;
      this.$refs['login'].maskClosable = true;
      this.$refs['login'].visible = true;
    },

    callback(key) {
      return key;
      console.log(key);
    },
    // 判断登录状态
    changeFlagH() {
      // 先判断登录状态，有则
      if (this.$store.state.token != "") {
        // 取消无登录状态
        return true;
      } else {
        this.modal1Visible = true;
      }
    },
    // 取消的回调
    changeFlag() {
      this.modal1Visible = false;
    },
    // timer用于储存定时器,防抖调用接口

    // 收藏功能,暂时不全
    collectFlag(e) {
      if (!this.changeFlagH()) {
        this.goLogin();
        return;
      }
      // 检测定时器
      if (this.timer) {
        // 如果有定时器,则清除
        clearTimeout(this.timer);
        this.timer = null;
      }

      // 设置定时器和事件
      this.timer = setTimeout(() => {
        this.collectFlage = !this.collectFlage;
        this.$ajax({
          url: "/user/usercollect/save",
          method: "post",
          params: {
            collectType: this.trainType,
            collectCode: e,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.prodetail(this.trainId);
          }
        });
      }, 500);
    },
    // 查询培训详情
    prodetail(e) {
      this.onLoading = true
      this.$ajax({
        url: "/educational/traininginfo/get/detail?trainNo=" + e,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          this.trainData = res.data;
          if (res.data.collectFlag != "0") {
            this.collectFlage = true;
          } else {
            this.collectFlage = false;
          }
        } else {
          this.onLoading = false
          this.trainData = [];
          this.btnState = 3;
        }
      });
    },
  },
  created() {
    this.prodetail(this.trainId);
  },
};
</script>


<style lang="less" scoped>
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  padding: 20px;
  // 状态标签
  .stateLabelli {
    padding: 4px 13px;
    background-color: #fb6d00;
    position: relative;
    font-family: PingFang SC;
    color: #fff;
    top: -243px;
  }
  .image1 {
    width: 387px;
    height: 267px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .toleft {
    margin-right: 40px;
  }
  .tpright {
    width: 100%;
  }
}
.center {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
  .cnleft {
    flex: 1;
    padding: 25px 32px;
    background-color: #fff;
    /deep/img{
      width: 100%;
    }
    .image2 {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .txtx {
      width: 100%;
      .txt1 {
        width: 100%;
        height: 148px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }
    }
  }
  .cnright {
    width: 340px;
    // flex-shrink: 0;
    margin-left: 20px;
    .axdiv {
      padding: 24px;
      width: 100%;
      background-color: #fff;
    }
  }
}

.cOicon-id {
  p {
    flex: 1;
  }
}
.collection {
  margin-top: 24px;
}
// 修改框架样式
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
</style>
